<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      :title="!dataForm.id ? $t('add') : $t('update')"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="50%"
      top="70px"
    >
      <div class="dialogInner">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'"
          :disabled="disabled"
        >
        
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="dataForm.name" placeholder="名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <ren-select
                  v-model="dataForm.complainantType"
                  dict-type="map_type"
                  placeholder="请选择类型"
                  style="width: 100%"
                ></ren-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经纬度" prop="lonandLat">
                <el-input
                  v-model="dataForm.lonandLat"
                  style="width: 60%; margin-right: 10px"
                ></el-input>
                <el-button type="primary" size="mini" @click="mapCli()"
                  >地图选点</el-button
                >
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="大小" prop="size">
                <el-input v-model="dataForm.size" placeholder="大小"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="dataForm.remark"
                  placeholder="备注"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详情介绍" prop="info">
                <el-input
                  v-model="dataForm.info"
                  placeholder="详情介绍"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="封面(最多1张)" prop="coverImage">
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :on-success="
                    (res, file, fileList) => successHandle1(res, file, fileList)
                  "
                  :before-upload="beforeUploadHandle"
                >
                  <img v-if="dataForm.pic" :src="dataForm.pic" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图片(最多10张)" prop="">
                <el-upload
                  :preview-src-list="dataForm.picList"
                  :action="url"
                  :file-list="fileListtwo"
                  :limit="10"
                  :before-upload="beforeUploadHandle"
                  list-type="picture-card"
                  :on-success="successHandletwo"
                  :on-remove="handleRemovetwo"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--地图-->
      <template slot="footer" v-if="!disabled">
        <el-button @click="resetForm">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()"
          >{{ $t("confirm") }}
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      width="80%"
      :visible.sync="mapShow"
      title="地图选点"
      top="70px"
      :showClose="false"
    >
      <mapdiv
        ref="mapDiv"
        style="width: 96%; margin: 0 auto 20px"
        :longitude="dataForm.longitude"
        :latitude="dataForm.latitude"
        @getPos="getPosVal($event)"
      >
      </mapdiv>
    </el-dialog>
  </div>
</template>

<script>
import mapdiv from "./map2";
import Cookies from "js-cookie";

export default {
  components: {
    mapdiv,
  },
  data() {
    return {
      mapShow: false,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogImageUrltwo: "",
      dialogVisibletwo: false,
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      fileList: [],
      fileListtwo: [],
      options: [
        {
          dictValue: 1,
          dictLabel: "景点",
        },
        {
          dictValue: 2,
          dictLabel: "酒店民宿",
        },
        {
          dictValue: 3,
          dictLabel: "餐饮美食",
        },
        {
          dictValue: 4,
          dictLabel: "特色体验",
        },
        {
          dictValue: 5,
          dictLabel: "停车场",
        },
        {
          dictValue: 6,
          dictLabel: "卫生间",
        },
        {
          dictValue: 7,
          dictLabel: "文化场馆",
        },
        {
          dictValue: 8,
          dictLabel: "公交车站",
        },
        {
          dictValue: 9,
          dictLabel: "游客服务中心",
        },
        {
          dictValue: 10,
          dictLabel: "码头售票处",
        },
        {
          dictValue: 11,
          dictLabel: "农贸商超",
        },
        {
          dictValue: 12,
          dictLabel: "公园",
        },
        {
          dictValue: 13,
          dictLabel: "医院诊所",
        },
        {
          dictValue: 14,
          dictLabel: "打卡点",
        },
        {
          dictValue: 15,
          dictLabel: "休闲娱乐",
        },
      ],
      dataRule: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 25,
            message: "长度在 3 到 25 个字符",
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: "请输入纬度",
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: "请输入经度",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
      },
      visible: false,
      dataForm: {
        id: "",
        name: "",
        longitude: "",
        latitude: "",
        type: "",
        info: "",
        remark: "",
        pic: "",
        picList: "",
        size: "",
        lonandLat: "",
      },
    };
  },
  computed: {},
  mounted() {
    //DOM初始化完成进行地图初始化
  },
  beforeDestroy() {
    if (!this.map) {
      return;
    }
    this.map.destroy();
    this.map = null;
  },
  methods: {
    mapCli() {
      this.mapShow = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.initMap();
      });
    },
    getPosVal(obj) {
      console.log("111111111111111111", obj);
      this.mapShow = false;
      this.dataForm.latitude = obj.lat;
      this.dataForm.longitude = obj.lon;
      this.dataForm.lonandLat = obj.lon + "," + obj.lat;
    },
    // 上传之前
    beforeUploadHandle(file) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
    },
    // 上传成功
    successHandle1(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.dataForm.pic = res.data.url;
    },
    handleRemovetwo(file, fileList) {
      if (fileList.length == 0) {
        this.dataForm.picList = "";
      } else {
        this.dataForm.picList = fileList
          .map((item) => {
            return item.url;
          })
          .toString();
      }
    },
    // 上传成功
    successHandletwo(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fileListtwo.unshift({
        name: "",
        url: res.data.url,
      });
      this.dataForm.picList = this.fileListtwo
        .map((item) => {
          return item.url;
        })
        .toString();
    },
    close() {
      this.dataForm = {
        id: "",
        name: "",
        longitude: "",
        latitude: "",
        type: "",
        info: "",
        status: "",
        remark: "",
        delFlag: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
        pic: "",
        picList: "",
        size: "",
      };
      this.$emit("changeDisabled");
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.fileList = [];
      this.$http
        .get("/sys/ismap/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.lonandLat =
            this.dataForm.longitude + "," + this.dataForm.latitude;
          if (this.dataForm.pic) {
            this.fileList = [
              {
                name: "",
                url: this.dataForm.pic,
              },
            ];
          } else {
            this.fileList = [];
          }

          if (this.dataForm.picList) {
            let lsdata = this.dataForm.picList.split(",");
            this.fileListtwo = lsdata.map((item, index, arr) => {
              let json = {};
              json.name = "";
              json.url = item;
              return json;
            });
          } else {
            this.fileListtwo = [];
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle(formName) {
      // this.dataForm.picList=null;

      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$http[!this.dataForm.id ? "post" : "put"](
            "/sys/ismap/",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.fileList = [];
              this.fileListtwo = [];
              this.dataForm = {
                id: "",
                name: "",
                longitude: "",
                latitude: "",
                type: "",
                info: "",
                status: "",
                remark: "",
                delFlag: "",
                creator: "",
                createDate: "",
                updater: "",
                updateDate: "",
                pic: "",
                picList: "",
                size: "",
              };
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.fileList = [];
      this.fileListtwo = [];
      this.dataForm = {
        id: "",
        name: "",
        longitude: "",
        latitude: "",
        type: "",
        info: "",
        status: "",
        remark: "",
        delFlag: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
        pic: "",
        picList: "",
        size: "",
      };
      this.$refs.dataForm.resetFields();
      this.visible = false;
    },
  },
  props: {
    disabled: Boolean,
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 400px;
  position: relative;
}

.Addresssearch {
  position: absolute;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 900px;
  z-index: 88;
  background: #fff;
  padding: 5px 0 0 10px;
}
</style>
